import React from 'react';
import "./Achie.scss"
import type { MenuProps } from 'antd';
import { Layout, Menu } from 'antd';
import { IssuesCloseOutlined, BookOutlined, FileSearchOutlined, SettingOutlined } from '@ant-design/icons';
import { Outlet, useNavigate } from 'react-router-dom';
import './Achievements'


const { Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];
interface Props {

}


function Home(props: Props) {
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }
    let navigate = useNavigate()
    const items2: MenuItem[] = [
        getItem('考核计划', '/index/achievements/achieFirst', <BookOutlined />),
        getItem('考核进度', '/index/achievements/achieSeconds', <IssuesCloseOutlined />,),
        getItem('员工绩效档案', '/index/achievements/achieThird', <FileSearchOutlined />,),
        getItem('设置', '', <SettingOutlined />, [
            getItem('指标库', '/index/achievements/achieForthOne'),
            getItem('考核模板', '/index/achievements/achieForthTwo'),
            getItem('绩效设置', '/index/achievements/achieForthThree'),
        ]),
    ]
    // const { token: { colorBgContainer },} = theme.useToken();
    const handleClick = (e: any) => {
        navigate(e.key)
    }
    //

    return (
        <div className='home'>

            <Layout >
                <Sider width={200} style={{ backgroundColor: 'white' }}>
                    <Menu
                        onClick={(e) => { handleClick(e) }}
                        theme="light" mode="inline" items={items2}  ></Menu>;
                </Sider>
                <Layout.Content style={{ padding: 20 }} >
                    <Outlet />
                </Layout.Content>
            </Layout>
        </div>
    );
}

export default Home;